<template>
    <!-- 就诊人组件静态结构 -->
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>就诊人管理</span>
                <el-button @click="addUser" class="button" type="primary" :icon="User">添加就诊人</el-button>
            </div>
        </template>
        <!-- 就诊人管理模块 -->
        <div class="visitors" v-if="scene == 0">
            <Visitor @removeUser="removeUser" @changeScene="changeScene" class="item" v-for="(user, index) in userArr"
                :key="user.id" :user="user" :index="index" />
        </div>
        <!-- 添加就诊人或者修改就诊人 -->
        <div class="form" v-if="scene == 1">
            <el-divider content-position="left">就诊人信息</el-divider>
            <el-form style="width:60%;margin:10px auto">
                <el-form-item label="用户姓名">
                    <el-input v-model="userParams.name" placeholder="请您输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-select v-model="userParams.certificatesType" placeholder="请您选择证件类型" style="width: 100%">
                        <el-option v-for="item in certationArr" :key="item.id" :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="userParams.certificatesNo" placeholder="请您输入证件号码"></el-input>
                </el-form-item>
                <el-form-item label="用户性别">
                    <el-radio-group v-model="userParams.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期">
                    <el-date-picker v-model="userParams.birthdate" value-format="YYYY-MM-DD" type="date"
                        placeholder="请您选择日期" />
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="userParams.phone" placeholder="请您输入手机号码"></el-input>
                </el-form-item>
            </el-form>
            <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
            <el-form style="width:60%;margin:10px auto">
                <el-form-item label="婚姻状况">
                    <el-radio-group v-model="userParams.isMarry">
                        <el-radio :label="1">已婚</el-radio>
                        <el-radio :label="0">未婚</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="自费/医保">
                    <el-radio-group v-model="userParams.isInsure">
                        <el-radio :label="1">自费</el-radio>
                        <el-radio :label="0">医保</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="当前住址">
                    <el-cascader v-model="userParams.addressSelected" :props="props" />
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="userParams.address" placeholder="请您输入用户详细地址"></el-input>
                </el-form-item>
            </el-form>
            <el-divider content-position="left">联系人信息（选填）</el-divider>
            <el-form style="width:60%;margin:10px auto" label-width="80">
                <el-form-item label="用户姓名">
                    <el-input v-model="userParams.contactsName" placeholder="请您输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-select v-model="userParams.contactsCertificatesType" placeholder="请您选择证件类型" style="width: 100%">
                        <el-option v-for="item in certationArr" :key="item.id" :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="userParams.contactsCertificatesNo" placeholder="请您输入证件号码"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="userParams.contactsPhone" placeholder="请您输入手机号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="default" @click="submit">提交</el-button>
                    <el-button type="primary" size="default" @click="handler">重写</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue'
import { reqGetUser } from '@/api/hospital/index'
import { reqCertationType, reqCity, reqAddOrUpdateUser } from '@/api/user/index'
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
let $router = useRouter()
let $route = useRoute()
// 存储全部就诊人信息
let userArr = ref<any>([])
// 卡片身体部分展示内容切换的场景
let scene = ref(0)
// 存储证件类型的数据
let certationArr = ref<any>([])
// 收集新增就诊人的数据
let userParams = reactive<any>({
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 0,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: ''
})

onMounted(() => {
    getAllUser()
    getCaertationType()
    // 判断当前这个路由组件是不是从挂号组件而来(挂号组件而来路径上面会携带query参数type=add)
    if ($route.query.type == 'add') {
        scene.value = 1
    }

    if ($route.query.type == 'edit') {
        scene.value = 1
    }
})
// 获取全部就诊人信息
const getAllUser = async () => {
    let result = await reqGetUser()
    if (result.code == 200) {
        userArr.value = result.data
    }
}
// 添加就诊人按钮的回调
const addUser = () => {
    reset()
    scene.value = 1
}
// 清空数据的方法
const reset = () => {
    Object.assign(userParams, {
        id: null,
        name: '',
        certificatesType: '',
        certificatesNo: '',
        sex: 0,
        birthdate: '',
        phone: '',
        isMarry: 0,
        isInsure: 0,
        addressSelected: [],
        address: '',
        contactsName: '',
        contactsCertificatesType: '',
        contactsCertificatesNo: '',
        contactsPhone: ''
    })
}
// 就诊人子组件自定义事件的回调
const changeScene = (user: any) => {
    scene.value = 1
    // 收集已有的就诊人信息
    Object.assign(userParams, user)
}
// 获取证件类型的接口
const getCaertationType = async () => {
    let result = await reqCertationType()
    if (result.code == 200) {
        certationArr.value = result.data
    }
}
// 级联选择器数据
const props: any = {
    lazy: true, //懒加载数据
    // 加载数据的方法
    async lazyLoad(node: any, resolve: any) {
        let result = await reqCity(node.data.id || '86')
        // 整理数据
        let showData = result.data.map((item: any) => {
            return {
                id: item.id,
                label: item.name,
                value: item.value,
                leaf: !item.hasChildren
            }
        })
        // 注入组件需要展示的数据
        resolve(showData)
    }
}
// 提交按钮的回调
const submit = async () => {
    try {
        // 发请求
        await reqAddOrUpdateUser(userParams)
        // 弹出成功的提示信息
        ElMessage({ type: 'success', message: userParams.id ? '更新成功' : '新增成功' })
        // 更改场景为0
        if ($route.query.type) {
            $router.back()
        } else {
            scene.value = 0
        }
        // 发请求获取数据重新加载页面
        getAllUser()
    } catch (error) {
        ElMessage({ type: 'error', message: userParams.id ? '更新失败' : '新增失败' })
    }
}
// 重写按钮的回调
const handler = () => {
    reset()
}
// 监听全部就诊人数据
watch(() => userArr.value, () => {
    if ($route.query.type == 'edit') {
        let user = userArr.value.find((item: any) => {
            return item.id = $route.query.id
        })
        Object.assign(userParams, user)
    }
})
// 子组件自定义事件删除的回调
const removeUser = () => {
    getAllUser()
}
</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.visitors {
    display: flex;
    flex-wrap: wrap;

    .item {
        width: 32%;
        margin: 5px;
    }
}
</style>